<template>
    <div class="content">
        <!-- <div>{{ zzKey }}</div> -->

        <div class="flz_w">
            <div class="left">
                <div :class="{ slcTit: slcIndex == index }" v-for="(item, index) in ssFlList" class="fln_item"
                    @click="slcIndexCli(index)">
                    <div @click="processSs(item)" class="tit">{{ item + "神煞" }}</div>
                    <div class="slc_btn">
                        <div :class="{ slc_btn_bg: slcIndex == index }" class="m"></div>
                    </div>
                </div>
                <!-- <div style="min-height: calc(var(--nav_btn_height) + 1rem);"></div> -->
            </div>
            <div v-show="slcName == '全部'" class="right">
                <div v-for="(item, index) in quanbu.value" class="r_item">
                    <div class="dz">{{ item.dz }}</div>
                    <div class="ss_item">
                        <div class="ss" v-for="(ss, index) in item.ss.split('、')">
                            {{ ss }}
                        </div>
                    </div>
                </div>
            </div>
            <div v-show="slcName != '全部'" class="right2">
                <div v-for="(item, index) in bufen.value" class="r_item">
                    <transition name="van-slide-left">
                        <div v-show="st" class="ss_item">
                            <div class="dz">{{ item.dz }}</div>
                            <div :class="quGzClass(item.ss)" class="ss">{{ item.ss }}</div>
                        </div>
                    </transition>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { Highlight } from "vant";
import { shareText } from "@buildyourwebapp/tauri-plugin-sharesheet";
import { getShenShaObj, handleAllAndCommenSS } from "../../api/getShenSha";
import { getGzClass } from "../../api/styleUtils";
import emitter from "../../bus/emitter";

export default {
    name: "Test",
    async created() {
        let allshenshas = getShenShaObj(this.qkdtopt);
        this.ssFlList = Object.keys(allshenshas);
        this.allSs = allshenshas;
        this.quanbu = allshenshas.全部;
        this.bufen = allshenshas.常用;
        console.log(this.quanbu);
    },
    components: {
        Highlight,
    },
    data() {
        return {
            ssFlList: null,
            slcIndex: 0,
            quanbu: null,
            allSs: null,
            slcName: "全部",
            bufen: null,
            slcIndex: 0,
            quGzClass: getGzClass,
            st: false,
        };
    },
    props: {
        qkdtopt: {
            type: Object, // 指定类型为对象
            required: true, // 是否必传
            // 可选：对象的默认值（必须用函数返回，避免引用类型共享）
        },
    },
    methods: {
        getShenShaL(dz) {
            let allshenshas = getShenShaObj(this.qkdtopt);
            console.log(allshenshas);
            return handleAllAndCommenSS(dz, allshenshas.全部);
        },
        slcIndexCli(index) {
            this.st = false;
            this.slcIndex = index;
            this.st = true;
        },
        processSs(name) {
            if (name == "全部") {
                this.slcName = "全部";
                emitter.emit("ppUpdateSs", this.convertToObject(this.quanbu.value));
            } else {
                this.slcName = name;
                this.bufen = this.allSs[name];
                console.log(this.bufen);
                emitter.emit("ppUpdateSs", this.classifyByEarthlyBranches(this.bufen.value));
            }
        },
        classifyByEarthlyBranches(data) {
            // 初始化包含12地支的对象，每个属性值为空数组
            const result = {
                子: [],
                丑: [],
                寅: [],
                卯: [],
                辰: [],
                巳: [],
                午: [],
                未: [],
                申: [],
                酉: [],
                戌: [],
                亥: [],
            };

            // 遍历原始数据数组
            data.forEach((item) => {
                const { dz, ss } = item;
                // 将dz值添加到对应ss属性的数组中
                if (result.hasOwnProperty(ss)) {
                    result[ss].push(dz);
                }
            });

            return result;
        },
        convertToObject(data) {
            // 初始化空对象
            const result = {};

            // 遍历数组，构建对象
            data.forEach((item) => {
                const { dz, ss = "" } = item;

                // 拆分ss字符串为数组（处理逻辑与之前一致）
                const ssArr = ss
                    .split("、")
                    .map((str) => str.trim())
                    .filter((str) => str !== "");

                // 以dz为键，ssArr为值存入对象
                result[dz] = ssArr;
            });

            return result;
        },
    },
    watch: {
        qkdtopt(n, o) {
            let allshenshas = getShenShaObj(this.qkdtopt);
            this.allSs = { ...allshenshas };
            this.quanbu = { ...allshenshas.全部 };
            this.bufen = { ...allshenshas.常用 };
            this.slcIndex = 0;
            this.slcName = "全部";
        },
    },
};
</script>

<style lang="scss" scoped>
$lcbgc: var(--lr_lcbgc);

.content {
    max-width: 96vw;
    height: calc(100vh - 135rem - var(--safe-top));
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 4px;
    overflow: hidden;
    font-weight: 400;
    margin-left: 2vw;
    background-color: $lcbgc;

    .flz_w {
        -webkit-overflow-scrolling: touch;
        height: calc(100vh - 135rem - var(--safe-top));
        height: calc(100vh - 135rem - var(--safe-top));
        display: flex;
        width: 96vw;
        justify-content: space-between;

        .left {
            height: calc(100vh - 135rem - var(--safe-top));
            width: 75px;
            display: flex;
            flex-direction: column;
            // border: 2px solid #a57ce4;
            overflow: scroll;
            border-radius: 4px;

            .slcTit {
               color: var(--cart_bg_color);
            }

            .fln_item {
                //  border: 2px solid #a57ce4;
                display: flex;
                justify-content: center;
                align-items: center;

                .slc_btn_bg {

                    background-color: var(--cart_bg_color);
                }

                .slc_btn {
                    height: 10rem;
                    width: 10rem;
                    border: 1.5rem solid var(--cart_bg_color);
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    .m {
                        width: 7px;
                        height: 7rem;
                        border-radius: 50%;
                    }
                }

                .tit {
                    width: fit-content;
                    padding-left: 5rem;
                    padding-right: 5rem;
                }

                margin-top: 5px;
                margin-bottom: 5px;
                flex-shrink: 0;
                height: 24px;
                font-size: 13px;
                // font-weight: 500;
                width: 75px;
                align-items: center;
            }
        }
    }

    .right {
        overflow: scroll;

        width: calc(96vw - 85px);
        display: flex;
        flex-direction: column;
        align-items: center;

        height: calc(100vh - 135rem - var(--safe-top));
        max-height: calc(100vh - 135rem - var(--safe-top));

        .r_item {
            margin-top: 5px;
            margin-bottom: 5px;
            height: fit-content;
            border-radius: 4px;
            width: calc(96vw - 85px);
            margin-left: 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #002c1c;

            .dz {
                font-weight: bold;
                font-size: 15px;
                margin-right: 10px;
            }

            .ss_item {
                display: flex;
                flex-wrap: wrap;

                .ss {
                    font-size: 13px;
                    margin: 5px;
                    // background-color: azure;
                    border-radius: 0 10px 0 10px;
                }
            }
        }
    }

    .right2 {
        width: calc(96vw - 85px);
        margin-top: 5px;
        margin-bottom: 5px;
        display: flex;
        flex-wrap: wrap;
        height: fit-content;

        .r_item {
            padding: 5px;
            background-color: var(--lr_lbgc);
            height: fit-content;
            border-radius: 4px;
            width: fit-content;
            margin: 5px;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            color: #002c1c;

            .dz {
                //   font-weight: bold;
                font-size: 13px;
            }

            .ss {
                font-size: 18px;
                margin-top: 5px;

                // background-color: azure;
            }
        }
    }
}
</style>
